<template>
    <div class="main" style="background-image: url('https://javastuder-file-1258983147.cos.ap-shanghai.myqcloud.com/static/static-file/deskback.jpg')">
        <div class="login">
            <el-form
                    label-position="left"
                    size="small"
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    label-width="70px"
                    class="change-form">
                <h3 class="title">修改密码</h3>
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input type="password" show-password v-model="ruleForm.oldPassword" autocomplete="off"  placeholder="旧密码" >
                    </el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" show-password v-model="ruleForm.newPassword" autocomplete="off"  placeholder="新密码" >
                    </el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input type="password" show-password v-model="ruleForm.confirmPassword" autocomplete="off"  placeholder="新密码" >
                  </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" style="width:290px">更新</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script>
    import { changePassword } from '@/api/user';
    export default {
        data() {
            //验证旧密码
            var validateOldPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入旧密码'));
                }else{
                    callback();
                }
            };
            //验证新密码
            var validateNewPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                }else{
                    callback();
                }
            };
            //验证新密码
            var validateConfirmPassword = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入确认新密码'));
              }else{
                callback();
              }
            };
            return {
                //表单数据
                ruleForm: {
                    //旧密码
                    oldPassword:'',
                    //新密码
                    newPassword: '',
                    //确认密码
                    confirmPassword: ''
                },
                //表单验证数据
                rules: {
                    oldPassword: [
                        { validator: validateOldPassword, trigger: 'blur' }
                    ],
                    newPassword: [
                        { validator: validateNewPassword, trigger: 'blur' }
                    ],
                    confirmPassword: [
                      { validator: validateConfirmPassword, trigger: 'blur' }
                    ],


                }
            };
        },
        methods: {
            //表单提交
            submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    //表单数据是否验证成功
                    if (valid) {
                        if(this.ruleForm.newPassword !== this.ruleForm.confirmPassword){
                          this.$message.warning("两次密码不一致!")
                          return;
                        }
                        if(this.ruleForm.oldPassword === this.ruleForm.newPassword){
                          this.$message.warning("原密码和新密码不可一致!")
                          return;
                        }
                        //调用登陆接口实现
                        let result = await changePassword(this.ruleForm);
                        if(result.status != null && result.status === '200') {
                            this.$router.push("/login")
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .main{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        position: relative;
    }
    .lang-container {
        position: absolute;
        top: 30px;
        right: 30px;
    }
    .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }
    .change-form {
        border-radius: 6px;
        background: #ffffff;
        width: 340px;
        border: 0px solid #ccc;
        padding: 25px 25px 5px 25px;
        .el-input {
            height: 38px;
            input {
                height: 38px;
            }
        }
        .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 2px;
            padding-bottom: 10px;
        }
    }
</style>